<template>
  <view class="card-key-input">
    <view class="input-container">
      <input class="input" type="text" v-model="cardKey" placeholder="请输入卡密"
        placeholder-class="placeholder" />
      <button class="submit-btn" :disabled="!cardKey || isSubmitting" @click="handleSubmit">
        {{ isSubmitting ? '验证中...' : '提交' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CardKeyInput',
  data() {
    return {
      cardKey: '',
      isSubmitting: false
    }
  },
  methods: {
    async handleSubmit() {
      if (!this.cardKey || this.isSubmitting) return

      this.isSubmitting = true
      try {
        // 调用云函数验证卡密
        const result = await uni.cloud.callFunction({
          name: 'verifyCardKey',
          data: {
            cardKey: this.cardKey
          }
        })

        if (result.result && result.result.success) {
          // 验证成功
          this.$emit('submit', {
            success: true,
            data: result.result.data
          })
          uni.showToast({
            title: '验证成功',
            icon: 'success'
          })
        } else {
          // 验证失败
          this.$emit('submit', {
            success: false,
            message: result.result?.message || '验证失败'
          })
          uni.showToast({
            title: result.result?.message || '验证失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('验证卡密失败:', error)
        this.$emit('submit', {
          success: false,
          message: '验证失败，请稍后重试'
        })
        uni.showToast({
          title: '验证失败，请稍后重试',
          icon: 'none'
        })
      } finally {
        this.isSubmitting = false
        this.cardKey = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.card-key-input {
  padding: 20rpx;

  .input-container {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .input {
      flex: 1;
      height: 80rpx;
      padding: 0 20rpx;
      border: 2rpx solid #dcdfe6;
      border-radius: 8rpx;
      font-size: 28rpx;

      &:focus {
        border-color: #409eff;
      }
    }

    .placeholder {
      color: #999;
    }

    .submit-btn {
      width: 160rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background-color: #409eff;
      color: #fff;
      border-radius: 8rpx;
      font-size: 28rpx;

      &:disabled {
        background-color: #a0cfff;
        cursor: not-allowed;
      }

      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style> 